<template>
  <!--头部区域-->
  <header-component :border="true"></header-component>

  <!--返回区域-->
  <div class="back_area">
    <div class="left">
      <img src="@/assets/ship-detail-img/back.png">
      <div class="ship_name">{{ shipDetail.code }}<span class="ship_status"><DictLabel v-model="shipDetail.shipStatus"
                                                                   code="ship_status"></DictLabel></span></div>
    </div>
    <div class="right">
      <div @click="isShowSharePopup = !isShowSharePopup" class="share_box">
        <img class="share_btn" src="@/assets/ship-detail-img/share.png">
        <!--悬浮层-->
        <div v-if="isShowSharePopup" class="popup">
          <div @click="toCopyLink" class="popup_item">copy Link</div>
          <div @click="isShowPosterDialog = true" class="popup_item">Generate Poster</div>
        </div>
      </div>

      <img
        v-if="shipDetail.isCollected == '0'"
        class="star"
        src="@/assets/search-ship-icon/star.png"
        @click="handleCollect()"
      />
      <img
        v-if="shipDetail.isCollected == '1'"
        class="star"
        src="@/assets/search-ship-icon/star-filled.png"
        @click="cancelCollect()"
      />


    </div>
  </div>

  <div class="shop_detail_container">
    <!--底部区域-->
    <div class="bottom_area">
      <div class="left_area">
        <div class="swiper_area">
          <swiper
            :slidesPerView="1"
            :spaceBetween="30"
            :loop="true"
            :pagination="{
      clickable: true,
    }"
            :navigation="true"
            :modules="modules"
            class="mySwiper"
          >
            <swiper-slide>
              <img src="@/assets/home-img/ship.png">
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/home-img/ship.png">
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/home-img/ship.png">
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/home-img/ship.png">
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/home-img/ship.png">
            </swiper-slide>
          </swiper>
        </div>
        <!--更多信息盒子-->
        <div class="more_information box_white_24">
          <div class="box_title">More Information</div>
          <div class="items">
            <!--imo号-->
            <div class="item">
              <div class="label">
                IMO No.
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.imo : "******" }}
              </div>
            </div>
            <!--Flag 船旗-->
            <div class="item">
              <div class="label">
                Flag
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.chess : "******" }}
              </div>
            </div>
            <!--主机数量-->
            <div class="item">
              <div class="label">
                主机数量
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.numberOfEngines : "******" }}
              </div>
            </div>
            <!--主机品牌-->
            <div class="item">
              <div class="label">
                主机品牌
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.engineBrand : "******" }}
              </div>
            </div>
            <!--建造国家-->
            <div class="item">
              <div class="label">
                建造国家
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.countryOfBuild : "******" }}
              </div>
            </div>
            <!--建造城市-->
            <div class="item">
              <div class="label">
                建造城市
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.cityOfBuild : "******" }}
              </div>
            </div>
            <!--建造船厂-->
            <div class="item">
              <div class="label">
                建造国家
              </div>
              <div class="value">
                {{ shipDetail.hasLevel3Permission ? shipDetail.shipyardOfBuild : "******" }}
              </div>
            </div>
          </div>
        </div>
        <!--文档盒子无三级权限-->
        <div v-if="!shipDetail.hasLevel3Permission" class="documents box_white_24">
          <div class="box_title">Documents</div>
          <div v-for="item in shipDetail.anonymizedShipProfileNumber" class="items">
            <div class="item">
              <div class="left">
                <img src="@/assets/ship-detail-img/document.png">
                <div>{{ shipDetail.hasLevel3Permission ? item : "****.pdf" }}</div>
              </div>
              <img src="@/assets/ship-detail-img/arrow-pdf.png">
            </div>
          </div>
        </div>
        <!--文档盒子有三级权限-->
        <div v-if="shipDetail.hasLevel3Permission" class="documents box_white_24">
          <div class="box_title">Documents</div>
          <div class="items">
            <div v-for="item in anonymizedDocumentList" @click="clickPdf(item)" class="item">
              <div class="left">
                <img src="@/assets/ship-detail-img/document.png">
                <div>{{ item.name }}</div>
              </div>
              <img src="@/assets/ship-detail-img/arrow-pdf.png">
            </div>
          </div>
        </div>
        <!--申请三级信息权限盒子-->
        <div v-if="!shipDetail.hasLevel3Permission" class="apply_area">
          <div> Apply for access to Unlock More Infomation</div>
          <button @click="clickApply">Apply</button>
        </div>
      </div>
      <div class="right_area">
        <!--Basic Information-->
        <div class="documents box_white_16">
          <div class="box_title">Basic Information</div>
          <div class="items">
            <div class="common-item">
              <div class="left">
                船型
              </div>
              <div class="right">
                {{ shipDetail.shipTypeName }}
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                建造年份
              </div>
              <div class="right">
                {{ shipDetail.yearOfBuild }}
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                船籍
              </div>
              <div class="right">
                <DictLabel v-model="shipDetail.shipStatus" code="ship_native"></DictLabel>
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                航区
              </div>
              <div class="right">
                <DictLabel v-model="shipDetail.navigationArea" code="navigation_area"></DictLabel>
              </div>
            </div>
          </div>
        </div>
        <!--Ship Data-->
        <div class="shop_datas box_white_16">
          <div class="box_title">Basic Information</div>
          <div class="items">
            <div class="common-item">
              <div class="left">
                Deadweight
              </div>
              <div class="right">
                {{ shipDetail.deadWeight }} m
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                GRT / NRT
              </div>
              <div class="right">
                {{ shipDetail.grossTonnage }} m
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                LOA
              </div>
              <div class="right">
                {{ shipDetail.totalLength }} m
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                Breadth Moulded
              </div>
              <div class="right">
                {{ shipDetail.mouldedBreadth }} m
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                Hull Depth
              </div>
              <div class="right">
                {{ shipDetail.mouldedDepth }} ㎡
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                Height
              </div>
              <div class="right">
                {{ shipDetail.overallHeight }}
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                Loaded Draft
              </div>
              <div class="right">
                {{ shipDetail.draft }} days
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                Service Speed
              </div>
              <div class="right">
                {{ shipDetail.designSpeed }} kn
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                Full Speed
              </div>
              <div class="right">
                {{ shipDetail.designSpeed }} kn
              </div>
            </div>
          </div>
        </div>
        <!--Lease Information-->
        <div class="shop_datas box_white_16">
          <div class="box_title">Lease Information</div>
          <div class="items">
            <div class="common-item">
              <div class="left">
                当前状态
              </div>
              <div class="right">
                <dict-label v-model="shipDetail.shipStatus" code="ship_status"></dict-label>
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                租期
              </div>
              <div class="right">
                {{ shipDetail.leaseTerm }}
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                租期起始日期
              </div>
              <div class="right">
                {{ shipDetail.leaseStartDate }}
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                租期结束日期
              </div>
              <div class="right">
                {{ shipDetail.leaseEndDate }}
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                期望租约方式
              </div>
              <div class="right">
                <dict-label v-model="shipDetail.preferredCharterType" code="lease_method"></dict-label>
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                现有租船合约
              </div>
              <div class="right">
                <dict-label v-model="shipDetail.currentCharterContract" code="lease_method"></dict-label>
              </div>
            </div>
            <div class="common-item">
              <div class="left">
                船舶动态
              </div>
              <div class="right">
                <dict-label v-model="shipDetail.shipNews" code="ship_dynamics"></dict-label>
              </div>
            </div>
          </div>
        </div>
        <!--意向报价-->
        <div class="quotation">
          <div class="left">
            <div class="label">意向报价</div>
            <div class="value">¥{{ shipDetail.intendedQuote }}</div>
          </div>
          <div class="right">
            <button @click="isShowContactUsDialog = true" class="confirm">Contact Us</button>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!--申请三级权限-->
  <apply-for-access-dialog :sid="shipDetail.sid" v-if="isShowApplyDialog" @close="isShowApplyDialog = false">
  </apply-for-access-dialog>

  <!--浏览pdf弹窗-->
  <pdf-viewer @close="isShowPdfViewer = false" v-if="isShowPdfViewer" :pdfUrl="currentPdfUrl"></pdf-viewer>

  <!--生成的海报-->
  <poster-dialog v-if="isShowPosterDialog" :shipDetail="shipDetail" @close="isShowPosterDialog = false"></poster-dialog>

  <!--联系我们弹窗-->
  <contact-us-dialog :shipId="shipDetail.sid"  source="shipDetail" v-if="isShowContactUsDialog" @close="isShowContactUsDialog = false"></contact-us-dialog>

</template>
<script setup>
import {ref, reactive, onMounted} from "vue"
import {Swiper, SwiperSlide} from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
// import required modules
import {Pagination, Navigation} from 'swiper/modules';
import ShipApI from "@/api/ship/index.js"
import {ResultEnum} from "@/enums/ResultEnum.js";
import {useRouter, useRoute} from 'vue-router'
import FavoriteApi from "@/api/favorite-ship/favorites.js";


const router = useRouter()  // 用于编程式导航
const route = useRoute()    // 用于获取当前路由信息


const modules = ref([Pagination, Navigation])


//船舶详情
const shipDetail = ref({
  sid: ""
})

const sid = ref()


//获取船舶详情
async function toGetShipDetail() {
  let res = await ShipApI.getShipDetail({sid: sid.value})
  if (res.code === ResultEnum.SUCCESS) {
    shipDetail.value = res.data
  }
}


onMounted(() => {
  console.log(route.query, "路由参数")
  if (route.query.sid) {
    sid.value = route.query.sid
    queryShipDocumentParam.value.sid = sid.value
    toGetShipDocumentList()
    toGetShipDetail()
  }
})


const isShowApplyDialog = ref(false) //展示申请三级权限弹窗

//点击apply按钮 打开申请权限弹窗 跳到页面头部
function clickApply() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 可选，添加平滑滚动效果
  });
  isShowApplyDialog.value = true
}

//点击当前的pdf
function clickPdf(url) {
  isShowPdfViewer.value = true
  currentPdfUrl.value = url
}

const isShowPdfViewer = ref(false) //是否展示pdf预览弹窗

const currentPdfUrl = ref("") //当前选中的pdfUrl

//收藏船

//收藏船
async function handleCollect() {
  let res = await FavoriteApi.addFavorites({sid: shipDetail.value.sid});
  if (res.code == ResultEnum.SUCCESS) {
    shipDetail.value.isCollected = '1';
  }
}

//取消收藏船
async function cancelCollect() {
  let res = await FavoriteApi.cancelFavorites({sid: shipDetail.value.sid});
  if (res.code == ResultEnum.SUCCESS) {
    shipDetail.value.isCollected = '0'
  }
}

//展示生成海报
const isShowPosterDialog = ref(false)


const isShowSharePopup = ref(false) //展示分享按钮popup

/**
 * 船舶文档列表相关(脱敏)
 * */
const queryShipDocumentParam = ref({
  pageNum: 1, pageSize: 1000, category: "anonymized", sid: null
})

//脱敏船舶文档
const anonymizedDocumentList = ref([])

//获取船舶文档列表 暂定一个原始
async function toGetShipDocumentList() {
  let res = await ShipApI.getShipDocumentList(queryShipDocumentParam.value)
  if (res.code === ResultEnum.SUCCESS) {
    anonymizedDocumentList.value = res.rows
  }
}

//复制链接
async function toCopyLink(){
  try {
    await navigator.clipboard.writeText(window.location.href);
    ElMessage.success('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

/**
 * 联系我们相关
 * */
//联系我们弹窗是否显示
const isShowContactUsDialog = ref(false)





</script>
<style lang="scss" scoped>
.shop_detail_container {
  padding: 24px 120px 24px 120px;
}

.back_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  box-sizing: border-box;
  border-bottom: 1px solid #EAECF2;
  padding: 12px 24px;

  img {
    width: 24px;
    height: 24px;
  }

  .left {
    display: flex;
    align-items: center;

    .ship_name {
      font-size: 20px;
      font-weight: bold;
      line-height: 32px;
      color: #1C1E24;
      display: flex;
      align-items: center;
    }

    .ship_status {
      padding: 4px 8px;
      z-index: 1;
      background: #D1F7D2;
      font-size: 12px;
      line-height: 16px;
      color: #3D3D3D;
      margin-left: 8px;
      border-radius: 4px;
    }

    .star {
      width: 24px;
      height: 24px;
    }
  }

  .right {
    display: flex;
    align-items: center;

    .share_box {
      position: relative;
      margin-right: 16px;
      width: 24px;
      height: 24px;
      .popup {
        width: 128px;
        height: 80px;
        position: absolute;
        z-index: 20;
        left: -60px;
        top: 140%;
        border-radius: 8px;
        background: #FFFFFF;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
        color: #808690;
        padding: 8px 0;
        max-height: 200px;
        overflow: auto;
        .popup_item {
          padding: 6px 12px;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: normal;
          color: #1C1E24;
        }
      }
    }

    .star_btn {
      margin-left: 16px;
    }
  }
}

.bottom_area {
  display: flex;
  justify-content: space-between;

  .left_area {
    width: 600px;
    margin-right: 16px;

    .swiper_area {
      width: 600px;
      height: 337px;

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
      }

      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .swiper-pagination-bullet-active {
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .swiper-button-prev, .swiper-button-next {
        color: #fff;
        background: rgba(0, 0, 0, .5);
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }

      .swiper-button-prev:after, .swiper-button-next:after {
        font-size: 12px;
        font-weight: bold;
      }


    }

    .more_information {
      margin-top: 20px;

      .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
        .item {
          margin-bottom: 16px;

          .label {
            font-size: 12px;
            line-height: 16px;
            color: #808690;
            margin-bottom: 4px;
          }

          .value {
            font-size: 14px;
            line-height: 20px;
            color: #808690;
          }
        }

        .item:last-child,
        .item:nth-last-child(2),
        .item:nth-last-child(3) {
          margin-bottom: 0; /* 取消最后一行的下边距 */
        }

      }
    }

    .documents {
      margin-top: 16px;

      .items {
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0;
          border-bottom: 1px solid #F0F2F7;

          img {
            width: 16px;
            height: 16px;
          }

          .left {
            display: flex;
            align-items: center;
            font-family: Helvetica Neue;
            font-size: 14px;
            line-height: 20px;
            color: #808690;

            img {
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
          }
        }

        .item:last-child {
          border: none;
        }
      }
    }

    .apply_area {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 32px;
      width: 100%;

      button {
        width: 96px;
        height: 32px;
        display: flex;
        flex-direction: column;
        padding: 6px 16px;
        border-radius: 8px;
        background: #F0F2F7;
        margin-top: 8px;
      }
    }
  }

  .right_area {
    flex: 1;

    .shop_datas {
      margin-top: 16px;
    }

    .quotation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      border: 1px solid #EAECF2;
      padding: 16px 24px;
      border-radius: 16px;
      margin-top: 16px;

      .left {
        .label {
          font-size: 14px;
          line-height: 20px;
          color: #808690;
        }

        .value {
          font-size: 24px;
          font-weight: bold;
          line-height: 32px;
          color: #1C1E24;
        }
      }

      .right {
        button {
          padding: 12px 16px;
          border-radius: 8px;
          opacity: 1;
          background: #1e90ff;
          font-size: 16px;
          line-height: 24px;
          text-align: center;
          color: #FFFFFF;
        }
      }
    }
  }
}


.box_white_24 {
  background-color: #fff;
  border: 1px solid #EAECF2;
  padding: 24px;
  border-radius: 16px;
}

.box_white_16 {
  background-color: #fff;
  border: 1px solid #EAECF2;
  padding: 24px 24px 16px 24px;
  border-radius: 16px;
}

.box_title {
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  color: #1C1E24;
  margin-bottom: 16px;
}

.common-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #F0F2F7;

  .left {
    font-size: 14px;
    line-height: 20px;
    color: #808690;
  }

  .right {
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #1C1E24;
  }
}

.common-item:last-child {
  border: none;
}
</style>
